<template>
  <div>
    <div class="detail">

      <div class="swipe"  v-bind:style="{ height: `${bannerHeight}px` }">
        <mt-swipe :auto="4000" :show-indicators="false">
          <mt-swipe-item v-for="swipe in swipes" :key="swipe">
            <img :src="swipe.swipe">
          </mt-swipe-item>
        </mt-swipe>
      </div>

      <div>
        <div class="BHV7s">
          <span>剩余<span class="_1NC5I">{{ bookingEdndCount }}</span>截止报名</span><span>￥<span class="_1oRGz">3699</span>/人</span>
        </div>
        <div class="_1HJ_F">
          <router-link :to="{ name: 'Pay' }">
            <div class="q_8Eg">立刻报名</div>
          </router-link>
        </div>
      </div>

      <div>
        <div class="ye">
          <div class="ye_tit">
            <div class="iconBox">
              <div class="icon_menu"></div>
            </div>
            <div>
              课程简介
            </div>
          </div>
          <div class="ye_content">
            <div>
              猩猩真诚地希望，你是想清楚了要和猩猩一起去完成这件事儿，减脂不难，但是需要一点决心和时间，否则建议不要报名；
              <br>BMI指数（体重/身高^2,体重以kg为单位，身高以m为单位）低于22，建议不要报名或者选择塑形类课程，一个班级大家体重水平差不多，更有利于教练编排动作；
            <br>教练的首要工作是帮助每个人减脂，其次才是和学员成为朋友，所以教练的要求会严厉，态度会严肃，我们相信，减脂成功了，大家自然就会是很好的朋友。
            <br>每周三次团体训练，每日三餐饮食监督，不为别的，只为帮你养成习惯，帮你习惯正确的生活方式，帮你习惯健康的生活方式，严厉是为了从观念上改变每一个学员，对得起你付的每一分钱；每日训练、饮食、睡眠、打卡监督，让教练针对学员的日常训练饮食进行跟踪指导。
            <br>【女神营主教练作为脂肪终结者减脂食谱的营养顾问，把控每一份食谱的品质】
            <br>教练透过时下流行有效的锻炼方式，功能性训练，器械塑形，HIIT，TRX(全身性塑型)tabata(高效燃脂)等训练课程，有效达到燃脂塑身效果，课余时间，学员按照教练建议的营养原则做饮食打卡，搭配教练建议的其他训练项目，自主运动，让学员养成正确良好的习惯，为科学有效的减肥途径。
            <br><br>
            </div>
          </div>
        </div>
        <div class="ye_mid"></div>


        <div class="ye">
          <div class="ye_tit">
            <div class="iconBox">
              <div class="icon_introduce"></div>
            </div>
            <div>
              课程安排
            </div>
          </div>
          <div class="ye_content">从6/12-7/21 六周 每周一、三、五 下午 15：00-16：30。 <br><br>第一周:<br>营养入门知识<br>V-body身体成分析<br>全身体肌肉激活: 大肌肉群耐力训练与全身燃脂<br>第二周:<br>身体前侧， 后侧强化， 核心肌肉训练<br>减脂与日常饮食安排，提供食谱<br>会员营养问题分析<br>第三周:<br>TRX全身塑形训练， HIIT，小功能器械循环训练。加快能量的消耗。<br>第四周:<br>结合国际流行的训练模式进行全身体塑形（腹部，臀，腿，背，胸，手臂）<br>第五周:<br>蹲，拉，推，举动作巩固<br>高强度低强度混合冲击性训练，提高脂肪燃烧速度<br>第六周:<br>tabata循环训练，全身TRX和HIIT高强度间歇训练<br><br>*每一节课包括拉伸训练</div>
        </div>
        <div class="ye_mid"></div>


        <div class="ye">
          <div class="ye_tit">
            <div class="iconBox">
              <div class="icon_man"></div>
            </div>
            <div>
              教练信息
            </div>
          </div>
          <div class="ye_content_coach">
            <div class="coach_head"><img :src="require('@/assets/images/coach_head.jpg')"></div>
            <div class="coach_info">
              <div class="coach_name">威力</div>
              <div class="coach_slogan">又一个用户转教练的经典案例!靠着健身变成男神，凭着对健身的热爱变成教练。希望努力将喜欢和快乐带给别人，影响更多人健身运动!</div>
            </div>
          </div>
        </div>
        <div class="ye_mid"></div>


        <div class="ye">
          <div class="ye_tit">
            <div class="iconBox">
              <div class="icon_careful"></div>
            </div>
            <div>
              注意事项
            </div>
          </div>
          <div class="ye_content">
            <div style="margin-bottom: 0.1rem;">1.BMI低于22的用户，建议不要购买，可以选购塑形类的课程，这样对其他用户以及自己都比较好</div>
            <div style="margin-bottom: 0.1rem;">2.教练会给每个学员制定适合自己的食谱，如果用户认为自己完全无法遵守食谱，在饮食上无法做出改变，建议不要购买</div>
            <div style="margin-bottom: 0.1rem;">3.以下人群不能参加：孕妇，产妇（顺产后不足6个月，剖腹产后不足1年），有心血管疾病者，有其他伤病（医生不建议参与剧烈锻炼者），未成年人（部分针对未成年的训练营例外）</div>
            <div style="margin-bottom: 0.1rem;">4.学员应根据课程时间，合理安排自己的时间，生病、出差、女性生理期、加班等，非超级猩猩课程原因导致的缺课，请假，均不予以补课退课退款</div>
            <div style="margin-bottom: 0.1rem;">5.学员因怀孕，伤残等原因导致的缺课请假（需出具医院证明），超级猩猩退回所有未进行课程费用，不予补课</div>
            <div style="margin-bottom: 0.1rem;">6.距离训练营开始超过7天，用户申请退款，超级猩猩不扣除任何费用</div>
            <div style="margin-bottom: 0.1rem;">7.距离训练营开始不足7天，用户申请退款，超级猩猩扣除30%报名费用</div>
            <div style="margin-bottom: 0.1rem;">8.训练营开始后，不支持退款</div>
            <div style="margin-bottom: 0.1rem;">9.所有报名训练营用户报名支付后，一定要扫描二维码进入训练营微信群，避免遗漏教练要传达的课前须知</div>
            <div style="margin-bottom: 0.1rem;">10.禁止空腹参加训练</div>
            <div style="margin-bottom: 0.1rem;">11.必须穿着运动服装和鞋子参加课程</div>
            <div style="margin-bottom: 0.1rem;">12.报名人数达到8人开营</div>
          </div>
        </div>
        <div class="ye_mid"></div>


        <div class="ye">
          <div class="ye_tit">
            <div class="iconBox">
              <div class="icon_idea"></div>
            </div>
            <div>
              健身步骤
            </div>
          </div>
          <div class="ye_content step">
            <img :src="stepsImg" style="height: 2.52rem; width: 2.4rem;">
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import { Swipe, SwipeItem } from 'mint-ui'

  export default {
    components: {
      Swipe: Swipe,
      SwipeItem: SwipeItem
    },
    data () {
      return {
        bookingEndTime: '2017-06-11 11:00:00',
        bookingEdndCount: '',
        stepsImg: require('@/assets/images/steps.png'),
        swipes: [
          {
            swipe: require('@/assets/images/21000_6.jpg')
          },
          {
            swipe: require('@/assets/images/21000_6.jpg')
          },
          {
            swipe: require('@/assets/images/21000_6.jpg')
          },
          {
            swipe: require('@/assets/images/21000_6.jpg')
          }
        ]
      }
    },
    methods: {
      ShowCountDown (DateString) {
        const now = new Date()
        const endDate = new Date(DateString)
        const leftTime = endDate.getTime() - now.getTime()
        let dd = parseInt(leftTime / 1000 / 60 / 60 / 24, 10) // 计算剩余的天数
        let hh = parseInt(leftTime / 1000 / 60 / 60 % 24, 10) // 计算剩余的小时数
        let mm = parseInt(leftTime / 1000 / 60 % 60, 10) // 计算剩余的分钟数
        let ss = parseInt(leftTime / 1000 % 60, 10) // 计算剩余的秒数
        dd = this.checkTime(dd)
        hh = this.checkTime(hh)
        mm = this.checkTime(mm)
        ss = this.checkTime(ss) // 小于10的话加0
        this.bookingEdndCount = `${dd}天${hh}:${mm}:${ss}`
      },
      checkTime (i) {
        if (i < 10) {
          i = '0' + i
        }
        return i
      },
      BookingEnd () {
        window.setInterval(() => { this.ShowCountDown(this.bookingEndTime) }, 1000)
      }
    },
    computed: {
      bannerHeight () {
        const eWidth = document.body.clientWidth
        return eWidth * 195 / 414
      }
    },
    mounted () {
      this.$nextTick(() => { this.BookingEnd() })
    }
  }
</script>

<style scoped="true" lang="less">
  .ye {
    background-color: #262626;
    border-radius: 0.05rem;
    overflow: hidden;
    padding: 0.14rem;
  }
  .iconBox {
    width: 0.24rem;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .ye_tit {
    height: 0.38rem;
    background-color: #262626;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    font-size: 0.17rem;
    color: #fff;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .ye_content {
    color: #999696;
    font-size: 0.12rem;
    font-weight: lighter;
    line-height: 0.17rem;
  }

  .ye_content_coach {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 0.8rem;
    margin-bottom: 0.1rem;
    margin-top: 0.1rem;
  }
  .ye_content_coach .coach_head {
    width: 0.9rem;
  }

  .ye_content_coach .coach_head img {
    border-radius: 50%;
    margin-left: 0.04rem;
    width: 0.65rem;
    height: 0.65rem;
    vertical-align: middle;
    display: block;
  }

  .ye_content_coach .coach_info {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .ye_content_coach .coach_info .coach_name {
    color: #d7d7da;
    font-size: 0.14rem;
    margin-bottom: 0.1rem;
    font-weight: bolder;
  }

  .ye_content_coach .coach_info .coach_slogan {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    font-size: 0.12rem;
    line-height: 0.17rem;
    color: #999696;
  }

  .ye_mid {
    height: 1px;
    background-color: #2e2e2c;
    display: block;
    content: "";
    margin-left: 1px;
    margin-right: 1px;
  }

  .step {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .detail {
    background: #333;
  }
  .BHV7s {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 0.15rem;
    color: #999696;
    line-height: 0.34rem;
    padding-left: 0.14rem;
    padding-right: 0.14rem;
  }
  ._1NC5I {
    color: #e61b64;
  }
  .BHV7s ._1oRGz {
    font-weight: bolder;
    color: #fff;
  }
  ._1HJ_F {
    margin-left: 0.14rem;
    margin-right: 0.14rem;
    height: 0.4rem;
    margin-bottom: 0.14rem;
  }
  .q_8Eg, .q_8Eg:visited {
    color: #e61b64;
    background-image: none;
    border-color: #e61b64;
  }
  .q_8Eg {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 100%;
    font-size: 0.17rem;
    box-sizing: border-box;
    font-weight: 500;
  }
   .q_8Eg{
    border-radius: 0.02rem;
    border-style: solid;
    border-width: 1px;
  }
  .swipe{
    width: 100%;
    height: 0.8rem;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
      display: block;
    }
  }
</style>

